<template>
	<view class="zone">

		<Header title="我的出售订单" color="#fff"></Header>

		<view class="main">
			<view class="box">
				<scroll-view lower-threshold="50" @scrolltolower="scrolltolower" style="height: 100%" scroll-y="true">
					<view class="list">
						<view class="list_son" v-for="(item,index) in datalist" :key="index">
							<view class="cen">
								<view class="left">
									<image class="img" :src="imgurl+item.img" mode="widthFix"></image>
								</view>
								<view class="jieshao">
									<view class="jieshao_top">
										{{item.name}}
									</view>
									<view class="jieshao_cen">
										出售数量：<text>{{item.num}}</text>
									</view>
									<view class="jieshao_bot">
										<text>{{item.crystal}}/个</text>
									</view>
								</view>
							</view>
							<view @click="quxiaoQiu(item)"
								:class="[item.status==0?'right button':item.status==1?'wc':'qux']">
								{{item.status==0?'取消出售':item.status==1?'已完成':'已取消'}}
							</view>
						</view>
					</view>
					<view v-if="datalist.length==0" class="zanwu">
						<image src="http://img.cpgm.cc/jsjy/static/public/empty.png" class="zaneu_img"
							mode="widthFix">
						</image>
						<view class="">
							没有数据哦~
						</view>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
				</scroll-view>
			</view>
			<view @click="popshow = true" class="fabu">
				<image src="http://img.cpgm.cc/panda/static/public/add.png" class="fabujia" mode="widthFix"></image>
				发布出售
			</view>
		</view>



		<u-popup mode="center" border-radius="30" v-model="show2">
			<view class="tanchu">
				<view class="center_prop">
					<view class="text">
						温馨提示
					</view>
				</view>
				<view class="tishi">
					确认要取消此物品的出售吗？
				</view>
				<view class="btn">
					<view @click="quxiao" class="lef_btn button">
						取消
					</view>
					<view @click="querenTs" class="rig_btn button">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="popshow" mode="bottom" border-radius="34">
			<view class="popbox">
				<image class="p_close" @click="popshow = false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
				<view class="p_tit">发布出售</view>

				<view class="flexbw">
					<text>请选择要出售的商品</text>
					<text>可出售数量：{{shul}}个</text>
				</view>

				<!-- 下面的商品 -->

				<scroll-view scroll-y class="csroll" @touchmove.stop>
					<view class="shooping">
						<view v-for="(item,index) in list" :key="index" @click="xuanze(item,index)" class="shoopList">
							<view class="tupian">
								<image :src="item.img?imgurl+item.img:`http://img.cpgm.cc/jsjy/static/daoju/${index+1}.png`"
									class="wupin" mode="widthFix"></image>
								<image src="http://img.cpgm.cc/jsjy/static/public/goux.png" v-show="index+1==ind"
									class="xuanzhong" mode="widthFix"></image>
								<view class="num">
									x{{Number(item.num).toFixed(0)}}
								</view>
							</view>

							<!-- 文字 -->
							<view class="wenzi">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="numbox">
					<view class="n_item">
						<p>出售单价（银元）</p>
						<input type="text" class="inp1" placeholder-class="palh" @input="input1" v-model="pay"
							placeholder="出售单价">
					</view>
					<view class="line"></view>
					<view class="n_item">
						<p>出售数量</p>
						<input type="number" class="inp1" placeholder-class="palh" v-model="num" @input="input"
							placeholder="出售数量" name="" id="">
					</view>
				</view>

				<view class="tips">
					<h3>温馨提示</h3>
					<p>1、每个用户最多只能发布10笔出售订单</p>
					<p>2、发布后不可取消，48小时未成交则退回道具;</p>
					<p>3、自由之刃等级越高，交易手续费越低。</p>
				</view>

				<!-- <view class="button">发布出售订单</view> -->
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="qiuList"
					class="button">
					发布出售
				</u-button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				show2: false,
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				value: '',
				active: 0,
				act: 1,
				id: 0,
				value2: '',
				show: false,
				page: 1,
				max_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				datalist: [],
				userinfo: '', //用户信息
				rewardshow: false,
				exchangenum: '', //这个是兑换的数量

				popshow: false,
				id: 0,
				shul: 0,
				ind: 0,
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				list: ['', '', '', '', '', ''],
				pay: '',
				num: ''
			}
		},
		onShow() {
			this.datalist = []
			this.page = 1
			this.max_page = 1
			this.getSilverList()
			this.initList()
		},
		methods: {
			// quxiao
			quxiao() {
				this.show2 = false
			},
			// /点击确认
			async querenTs() {
				this.$u.toast('上架后无法取消 , 等待48小时候自动返还')
				// let n = await this.$http.index.cancelSell({
				// 	id: this.id
				// })
				// this.$u.toast(n.msg)
				// if (res.code == 1) {
				// 	this.show2 = false
				// 	this.datalist = []
				// 	this.page = 1
				// 	this.max_page = 1
				// 	this.getSilverList()
				// }
			},
			// 取消求购
			quxiaoQiu(item) {
				if (item.status != 0) return
				this.show2 = true
				this.id = item.id
			},
			// 滚动到底部
			scrolltolower() {
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.getSilverList();
					setTimeout(() => {
						if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},
			// 点击发布出售
			fabuchushou() {
				this.$p.navto('/pages/game/my_Release')
			},
			// /获取求购列表
			async getSilverList() {
				let res = await this.$http.index.mySellList({
					page: this.page
				})
				this.datalist = [...this.datalist, ...res.data];
				this.max_page = res.page;
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				}
			},


			input(e) {
				this.$nextTick(() => {
					this.num = parseInt(this.num)
				});
			},
			input1(e) {
				this.$nextTick(() => {
					this.pay = this.pay.replace(/[^\d.]/g, '').replace(/(\.\d+)\.+/g, '$1').replace(/(\..*)\./g,
						'$1')
				});
			},
			// 点击选择
			xuanze(item, index) {
				if (item.num <= 0) return this.$u.toast('暂无道具')
				this.shul = Number(item.num).toFixed(0)
				this.ind = index + 1
				this.id = item.id
			},
			// 请求出售
			async qiuList() {
				if (!this.pay || !this.num) {
					return this.$u.toast('请填写单价和数量')
				}
				let n = await this.$http.index.toSell({
					id: this.id,
					price: this.pay,
					num: this.num
				})
				this.$u.toast(n.msg)
				if (n.code == 1) {
					this.pay = ''
					this.num = ''
					this.initList()
					this.popshow = false

					this.datalist = []
					this.page = 1
					this.max_page = 1
					this.getSilverList()
				}
			},

			// 获取求购及出售列表
			async initList() {
				let n = await this.$http.index.marketList()
				this.list = n.data
			}


		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.tanchu {
		position: relative;
		padding: 20px;
		min-width: 310px;
		// height: 215px;
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		border-radius: 18px;
		border-radius: 15px;

		.btn {
			width: 100%;
			height: 57px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30px;

			.lef_btn {
				width: 120px;
				height: 50px;
				background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
				background-size: 100% 100%;
				font-size: 16px;
				color: #fff;
				text-align: center;
				font-weight: 600;
				text-align: center;
				filter: grayscale(1);
			}

			.rig_btn {
				width: 120px;
				height: 50px;
				background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
				background-size: 100% 100%;
				border-radius: 5px;
				font-size: 16px;
				color: #B73800;
				text-align: center;
				font-weight: 600;
			}
		}

		.tishi {
			text-align: center;
			margin: 10px 0;
			font-size: 14px;
			color: #000;
		}

	}

	.center_prop {
		position: relative;
		height: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 25px;

		.text {
			font-size: 20px;
			font-weight: bold;
			color: #000;
			margin: 0 16px;
		}

		.xing {
			width: 14px;
			height: 14px;
		}

		.bg_qiu {
			position: absolute;
			width: 35px;
			height: 17px;
			border-radius: 10px;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		}
	}



	.zanwu {
		font-size: 14px;
		color: #A1A1A1;
		font-weight: 500;
		// margin-top: 20%;
		text-align: center;

		.zaneu_img {
			width: 70%;

		}
	}

	.zone {
		background: linear-gradient(180deg, #005FFE 0%, #2BD2F7 34%, #58F6D9 53%, #28E2F5 62%, #8B66FC 100%);
		min-height: 100vh;
	}

	.fabu {
		position: fixed;
		width: 60%;
		left: 50%;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		max-width: 300px;
		height: 51px;
		bottom: 30px;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.12);
		border-radius: 31px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15px auto 0;
		color: #000000;
		font-size: 14px;

		.fabujia {
			width: 17px;
			margin-right: 6px;
			height: 17px;
		}
	}

	.list {
		padding-bottom: 50px;
		.list_son {
			width: 100%;
			background: rgba(255,255,255,0.7);
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px;
			margin-bottom: 10px;

			.wc {
				text-align: center;
				font-size: 12px;
				font-weight: 500;
				color: #0A7EFB;
				flex: 1.2;
			}

			.qux {
				flex: 1.2;
				text-align: center;
				font-size: 12px;
				font-weight: 500;
				color: #000000;
			}

			.right {
				width: 77px;
				height: 33px;
				line-height: 33px;
				text-align: center;
				background: linear-gradient(180deg, #7AFDCF 0%, #0477FD 100%);
				border-radius: 17px;
				border: 2px solid #FFFFFF;
				border-radius: 6px;
				font-size: 12px;
				color: #fff;
			}

			.cen {
				flex: 4;
				display: flex;
				align-items: center;

				.jieshao {
					flex: 1;
					.jieshao_top {
						font-size: 15px;
						font-weight: 600;
						color: #111110;
					}

					.jieshao_cen {
						font-size: 11px;
						font-weight: 500;
						color: #343434;
						margin: 4px 0;
					}

					.jieshao_bot {
						font-size: 11px;
						font-weight: 500;
						background: #fff;
						border-radius: 9px;
						display: flex;
						align-items: center;
						padding: 2px 6px;
						width: fit-content;

						text {
							color: #fff;
							line-height: 17px;
							background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						.img_tu {
							width: 16px;
							height: 14px;
						}
					}
				}

				.left {
					width: 65px;
					height: 65px;
					background: #fff;
					border-radius: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10px;

					.img {
						width: 100%;
					}
				}
			}
		}
	}

	.top_t {
		position: fixed;
		top: 0;
		height: 750rpx;
		max-width: 480px;
		width: 100%;
		z-index: -1;
		background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	}

	.main {
		padding: 10px;
	}

	.box {
		height: calc(100vh - 160px);
	}


	.popbox {
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		padding: 15px;
		position: relative;

		.button {
			width: 90%;
			height: 55px;
			background: linear-gradient(180deg, #7AFDCF 0%, #0477FD 100%);
			border-radius: 28px;
			border: 2px solid #FFFFFF !important;
			margin: 20px auto;
			color: #fff;
			font-size: 16px;
		}
	}

	.p_close {
		position: absolute;
		width: 25px;
		right: 10px;
		top: 10px;
	}

	.p_tit {
		text-align: center;
		color: #000000;
		font-size: 20px;
		font-weight: 600;
	}

	.flexbw {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;

		text:nth-child(1) {
			color: #343434;
			font-size: 14px;
			font-weight: 600;
		}

		text:nth-child(2) {
			color: #343434;
			font-size: 12px;
			font-weight: 600;
		}
	}


	.csroll {
		height: 30vh;
	}

	.shooping {
		display: flex;
		flex-wrap: wrap;
		background: rgba(255,255,255,0.9);
		border-radius: 8px;
		padding: 10px;

		.shoopList {

			width: 20%;
			min-height: 70px;
			margin-bottom: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.wenzi {
				text-align: center;
				font-size: 12px;
				zoom: 0.85;
				font-weight: 500;
				color: #111110;
				margin-top: 4px;
			}

			.tupian {
				position: relative;
				width: 57px;
				height: 57px;
				background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
				border-radius: 4px;

				.num {
					position: absolute;
					right: 5%;
					bottom: 5%;
					font-size: 8px;
					color: #000;
					// font-weight: bold;
					line-height: 13px;
				}


				.xuanzhong {
					position: absolute !important;
					top: 0%;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 9;
				}

				.bg {
					width: 57px;
				}

				.wupin {
					width: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 1;
				}
			}
		}
	}

	.numbox {
		background: #fff;
		border-radius: 5px;
		margin-top: 10px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.line {
		width: 1px;
		background: rgba(0, 0, 0, 0.1);
		height: 50px;
	}

	.n_item {
		width: 49%;
		padding: 10px;
		display: flex;
		align-items: center;
		flex-direction: column;

		p {
			width: 100%;
			text-align: left;
			color: #343434;
			font-size: 14px;
		}

		input {
			color: #343434;
			font-size: 16px;
			font-weight: 600;
			margin-top: 5px;
		}
	}

	.palh {
		color: rgba(0, 0, 0, 0.3);
	}

	.tips {
		margin-top: 10px;

		h3 {
			color: #343434;
			font-size: 14px;
		}

		p {
			color: #111110;
			font-size: 12px;
		}
	}
</style>